<template>
  <!-- 新碟上架首页 -->
  <div class="new_disc_home">
    <div class="head">
      <span class="title">{{ currentArea + "新碟" }}</span>
      <span
        class="type"
        v-for="item in areas"
        :key="item.key"
        @click="typeClick(item)"
        >{{ item.value }}</span
      >
    </div>
    <NewDiscItem @new-disc-list-item-click="newDiscListItemClick"></NewDiscItem>
    <Page
      :total-data="totalData"
      :page-num="20"
      @change-page="changePage"
    ></Page>
  </div>
</template>

<script>
import {
  defineComponent,
  onMounted,
  provide,
  ref,
  reactive,
  toRefs,
  getCurrentInstance,
} from "vue";

import { handleNewDisc } from "@/network/newdisc/newdisc.js";

import NewDiscItem from "@/components/newdiscChild/NewDiscItem.vue";
import Page from "@/components/page/Page.vue";

export default defineComponent({
  name: "NewDisc",
  components: {
    NewDiscItem,
    Page,
  },
  setup() {
    let data = reactive({
      currentArea: "全部",
      areas: [
        { key: "ALL", value: "全部" },
        { key: "ZH", value: "华语" },
        { key: "EA", value: "欧美" },
        { key: "KR", value: "韩国" },
        { key: "JP", value: "日本" },
      ],
      // 新碟请求参数
      newDiscParam: {
        limit: 20,
        offset: 0,
        area: "ALL",
      },
      totalData: 0,
    });
    let newDiscList = ref([]);
    let { proxy } = getCurrentInstance();

    provide("newDiscList", newDiscList);

    onMounted(() => {
      getNewDisc(data.newDiscParam);
    });

    // 获取新碟请求
    let getNewDisc = async (params) => {
      let res = await handleNewDisc(params);
      newDiscList.value = res.albums;
      data.totalData = res.total;
    };

    // 改变页码回调
    let changePage = (page) => {
      data.newDiscParam.offset = (page - 1) * 20;
      getNewDisc(data.newDiscParam);
      document.documentElement.scrollTop = 0;
    };

    // 点击类型回调
    let typeClick = (area) => {
      if (data.currentArea == area.value) {
        return;
      }
      data.currentArea = area.value;
      data.newDiscParam.area = area.key;
      getNewDisc(data.newDiscParam);
    };

    // 点击新碟上架中某张新碟触发回调
    let newDiscListItemClick = (item) => {
      // console.log(item);
      proxy.$message.show({
        title: "该内容还未开放",
        type: "info",
      });
    };

    return {
      ...toRefs(data),
      changePage,
      typeClick,
      newDiscListItemClick,
    };
  },
});
</script>
<style scoped>
.new_disc_home {
  width: 100%;
}
.head {
  width: 100%;
  padding-bottom: 15px;
  margin-bottom: 20px;
  border-bottom: 2px solid #c20c0c;
}
.title {
  font-size: 22px;
  color: #222;
  font-weight: 500;
}
.type {
  transition: all 0.3s;
  padding: 0 20px;
  font-size: 16px;
  color: #666;
  border-right: 1px solid #ccc;
  cursor: pointer;
}
.type:hover {
  text-decoration: underline;
}
</style>
